<template>
  <div>
    <div class="singleSelected">
      <el-select v-model="value" class="m-2" placeholder="全部类型" style="margin-right:50px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" class="m-2" placeholder="全部状态" style="margin-right:50px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" class="m-2" placeholder="优惠券名称" style="margin-right:50px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div style="margin-top: -10px;">
      <el-row class="mb-4">
        <el-button type="primary" plain style="margin-bottom: 20px;">+新建</el-button>
        <el-button plain>投放</el-button>
        <el-button plain>批量删除</el-button>
      </el-row>
    </div>
    <el-table ref="singleTableRef" highlight-current-row style="width: 100%;overflow: hidden;"
      :header-cell-style="{ background: '#C9DAFF' }" :span-method="objectSpanMethod" :data="list" border>
      <el-table-column type="selection" width="50" />
      <el-table-column prop="youhui" label="优惠券名称" width="120" />
      <el-table-column prop="zt" label="状态" width="120" />
      <el-table-column prop="mk" label="使用门槛" />
      <el-table-column prop="amount" label="发放总量" />
      <el-table-column prop="ff" label="已发放数" />
      <el-table-column prop="sy" label="已使用数" />
      <el-table-column prop="address" label="启用">
        <template #default="scope">
          <el-switch v-model="scope.row.qi" inline-prompt active-text="是" inactive-text="否" v-if="scope.row.mk"/>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="scope">
         <span v-if="scope.row.mk" style="margin-right: 7px;color: orange;cursor: pointer;">领取列表</span>
         <span v-if="scope.row.mk" style="color: orange;cursor: pointer;">删除</span> 
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { inputNumberProps } from 'element-plus';

export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '代金券'
      }, {
        value: '选项2',
        label: '折扣券'
      }],
      value: '',
      list: [{ youhui: '类型：代金券 抵扣金额：10.00元 有效时段：2019/04/10 00:00 ~ 2019/04/17 23:59',zt:'编辑 发放'},
      { youhui: '10元优惠券', zt: '已过期', mk: 50, amount: '无限制', ff: 11, sy: 8, qi: false },
      { youhui: '类型：折扣券       折扣额度：9.8折 有效时段：领券3天后生效，有效期7天',zt:'编辑 发放' },
      { youhui: '10元优惠券', zt: '已过期', mk: 50, amount: '无限制', ff: 11, sy: 8, qi: true },
      { youhui: '类型：代金券 抵扣金额：5.00元 有效时段：2019/04/10 00:00 ~ 2019/04/17 23:59',zt:'编辑 发放' },
      { youhui: '10元优惠券', zt: '已过期', mk: 50, amount: '无限制', ff: 11, sy: 8, qi: false }]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 1,
            colspan: 7
          };
        } 
      }
      // if((columnIndex !== 8 && columnIndex !== 2)){
      //   if (rowIndex % 2 === 0) {
      //     return [1, 6];
      //   }
      // }
      // if (rowIndex % 2 === 0) {
      // if (columnIndex === 0) {
      // return [1, 7];
      // } else if (columnIndex === 1) {
      //   return [0, 0];
      // }
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.singleSelected {
  width: 1200px;
  height: 32px;
}

.mb-4 {
  margin-top: 30px;
}
</style>